<template>
  <div class="group-item">
    <div class="option" v-if="!inSetting">
      <div class="add el-icon-plus" @click="add"></div>
      <div class="del el-icon-circle-close" @click="del"></div>
      <div class="del el-icon-setting" @click="setting"></div>
      <div class="del el-icon-document" @click="contacts"></div>
    </div>
    <img class="group_bg" :src="group.bg_image" alt="">
    <div class="title">
      <h2 class="name"><a href="javascript:" style="color: white"
                          @click="goto">{{group.name}}{{group_member.length}}</a>
      </h2>
      <img class="group_logo" :src="group.logo" alt="">
    </div>
    <div class="content">
      <p class="intro">{{group.desc}}</p>
      <div class="member_container" :class="{'hide_all':hide_all}">
        <h3 class="member_title">群组成员：</h3>
        <ul class="member_list">
          <li class="member" v-for="item in group_member">
            <a href="javascript:"><img :src="item.avatar" alt="" @click="goto2(item.id)"></a>
          </li>
        </ul>

      </div>
      <!-- <a v-if="!inSetting" class="el-icon-arrow-down toggle" :class="hide_all ? 'el-icon-arrow-down':'el-icon-arrow-up'"
          href="JavaScript:" @click="toggle">
         <span v-if="hide_all">查看群组成员</span><span v-else>隐藏</span>
       </a>-->
    </div>
  </div>
</template>
<script>
  import { groupReadMember } from '@/public/api'

  export default {
    props: {group: {}, inSetting: {default: false}},
    data () {
      return {
        hide_all: true,
        group_member: [
          {
            id: 1,
            name: 'lisi',
            avatar: '//tvax3.sinaimg.cn/crop.0.0.512.512.50/006quK43ly8fjgv9prtf1j30e80e83z6.jpg'
          }
        ]
      }
    },
    methods: {
      toggle () {
        this.hide_all = !this.hide_all
        if (!this.hide_all) {
          this.getGroupMember()
        }
      },
      getGroupMember () {
        groupReadMember({group_id: this.group.id})
          .then(
            data => {
              if (data.status) {
                this.group_member.length = 0
                let content = data.data
                for (let i = 0; i < content.length; i++) {
                  this.group_member.push({
                    id: content[i].user_info.id,
                    name: content[i].user_info.name,
                    avatar: content[i].user_info.avatar
                  })
                }
              }
            }
          )
      },
      add () {
        this.$emit('add', this.group.id)
      },
      del () {
        this.$emit('del', this.group.id)
      },
      setting () {
        this.$emit('setting', this.group.id)
      },
      contacts () {
//        console.log(this.group.id)
        this.$emit('contacts', this.group.id)
      },
      goto () {
        this.$router.push({name: 'main-group', params: {role: this.group.id}})
      },
      goto2 (id) {
        // console.log(22222222222222222222222222222, id)
        this.$router.push({name: 'main', params: {role: id}})
      }
    },

    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    }
  }
</script>
<style scoped>
  .group-item {
    background: #ffffff;
    min-width: 400px;
    min-height: 200px;
    overflow: visible;
  }

  .group_bg {
    width: 100%;
    height: 250px;
    background: #000;
  }

  .group_logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
  }

  .title {
    /*background: palegreen;*/
    margin-top: -60px;
    text-align: right;
    padding-right: 2em;
    z-index: 933333;
  }

  .title .name, .title .group_logo {
    display: inline-block;
    vertical-align: middle;
    margin-left: 1em;
  }

  .group-item .content {
    /*background: sienna;*/
    margin-top: -10px;
    padding: 0 1em 1em;
    /*height: 400px;*/
  }

  .intro {
    text-indent: 2em;
  }

  .member_list {
    font-size: 0;
    transition: height 1s;
    overflow: hidden;
  }

  .hide_all {
    height: 0px;
    transition: height 1s;
  }

  .member_container {
    overflow: hidden;
    transition: height 1s;
    text-align: left;
  }

  .member_container h3 {
    margin: 12px 0;
  }

  .toggle {
    display: block;
    /*background: deepskyblue;*/
    text-align: center;
    /*display: none;*/
  }

  .member_title {
    /*background: navy;*/
  }

  .member {
    display: inline-block;
    margin: 5px;
    /*background: firebrick;*/
  }

  .member_title {
    float: left;
  }

  .member img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }

  .group-item:hover .option {
    font-size: 20px;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(13%) translateY(-50%);
  }

  .group-item .option {
    font-size: 0
  }

  .option div:hover {
    cursor: pointer;
    color: orange;
  }

</style>
